<template>
    <div v-loading="loading">
        <!-- 数据内容 -->
        <checkData v-if="showCheckData" :data="tableData" :type="params.collectChannel" @close="resetParams"/>

        <!-- 搜索条件 -->
        <div class="create-data" v-else>
            <div>
                <span>采集渠道：</span>
                <el-select v-model="params.collectChannel" @change="channelChange">
                    <el-option label="taptap" value="taptap"></el-option>
                    <el-option label="应用宝" value="应用宝"></el-option>
                </el-select>
            </div>

            <h2 class="title">第一步：采集规则</h2>

            <div class="create-item">
                <topTitle title="采集方式"/>
                <el-radio-group v-model="radio" v-if="params.collectChannel === 'taptap'">
                    <div class="params-input-box">
                        <div class="radio-items">
                            <el-radio :label="1">ID范围</el-radio>
                        </div>
                        <div v-if="radio === 1" class="params-input">
                                <el-input placeholder="请输入起始id" type="number" v-model="params.tapTapCollectWay.fromId" clearable style="width:160px"></el-input>
                                <span class="params-center">至</span>
                                <el-input placeholder="请输入终止id" type="number"  v-model="params.tapTapCollectWay.toId" clearable style="width:160px"></el-input>
                        </div>
                    </div>
                    <div class="params-input-box">
                        <div  class="radio-items">
                            <el-radio :label="2">关键词</el-radio>
                        </div>
                        <div v-if="radio === 2" class="params-input">
                            <!-- <el-input placeholder="请输入关键词" v-model.trim="params.tapTapCollectWay.keyWord" clearable></el-input> -->
                            <el-input
                                type="textarea"
                                style="width:300px"
                                :rows="3"
                                clearable
                                placeholder="请输入关键词，若查询多个关键词请用','（英文逗号）分割或者换行"
                                v-model="params.tapTapCollectWay.keyWord">
                            </el-input>
                        </div>
                    </div>
                    <div style="margin-top:10px;padding-left:45px;" v-if="radio === 2">
                        <span style="margin-right: 32px;font-size:14px;">数量：</span>
                        <el-input-number v-model.trim="params.tapTapCollectWay.limit" style="width:160px" controls-position="right" :min="1"></el-input-number>
                    </div>
                    <div class="params-input-box">
                        <div  class="radio-items">
                            <el-radio :label="3">精准搜索</el-radio>
                        </div>
                        <div v-if="radio === 3" class="params-input">
                            <el-input placeholder="请输入gamid" type="number" v-model="params.tapTapCollectWay.gameId" clearable style="width:160px"></el-input>
                            <el-input placeholder="请输入package" v-model.trim="params.tapTapCollectWay.packageName" clearable style="width:160px;margin-left:10px;"></el-input>
                        </div>
                    </div>
                </el-radio-group>
                <el-radio-group v-model="radio" v-else>
                    <div class="params-input-box">
                        <div class="radio-items">
                            <el-radio :label="1">包名</el-radio>
                        </div>
                        <div v-if="radio === 1" class="params-input">
                            <el-input  placeholder="请输入包名" v-model.trim="params.applicationTreasureColleectionWay.packageName" clearable style="width:160px"></el-input>
                        </div>
                    </div>
                    <div class="params-input-box">
                        <div  class="radio-items">
                            <el-radio :label="2">关键词</el-radio>
                        </div>
                        <div v-if="radio === 2" class="params-input">
                            <el-input
                                type="textarea"
                                style="width:300px"
                                :rows="3"
                                clearable
                                placeholder="请输入关键词，若查询多个关键词请用','（英文逗号）分割或者换行"
                                v-model="params.applicationTreasureColleectionWay.keyWord">
                            </el-input>
                            <!-- <el-input placeholder="请输入关键词" v-model.trim="params.applicationTreasureColleectionWay.keyWord" clearable style="width:160px"></el-input> -->
                        </div>
                    </div>
                    <div style="margin-top:10px;padding-left:45px;">
                        <span style="margin-right: 32px;font-size:14px;">数量：</span>
                        <el-input-number v-model.trim="params.applicationTreasureColleectionWay.limit" style="width:160px" controls-position="right" :min="1"></el-input-number>
                    </div>
                </el-radio-group>
            </div>

            <!-- 采集内容 -->
            <div class="create-item">
                <topTitle title="采集内容"/>
                <div class="check-box">
                    <div class="check-items">
                        <div><el-checkbox v-model="params.contentCollect.verticalScreen" label="竖屏截图"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.gameHomeVideo" label="游戏首页视频"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.twoOfficialVideo" label="游戏二级官方视频"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.twoUserVideo" label="游戏二级用户视频"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.apk" :disabled="true" label="APK包"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.bannerImage" :disabled="true" label="banner样式图片"></el-checkbox></div>
                    </div>
                    <div class="check-items">
                        <div><el-checkbox v-model="params.contentCollect.gameTitle" :disabled="true" label="游戏副标题"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.gameIntroduce" :disabled="true" label="游戏简介"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.gameCategory" :disabled="true" label="游戏类型"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.label" :disabled="true" label="游戏tag"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.gameLength" :disabled="true" label="游戏大小"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.systemRequire" :disabled="true" label="系统需求"></el-checkbox></div>
                    </div>
                    <div class="check-items">
                        <div><el-checkbox v-model="params.contentCollect.gameFirm" :disabled="true" label="游戏厂商"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.gameCharges" :disabled="true" label="游戏资费"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.applyRating" :disabled="true" label="应用分级"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.updateTime" :disabled="true" label="更新时间"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.gameScore" :disabled="true" label="评分"></el-checkbox></div>
                        <div><el-checkbox v-model="params.contentCollect.gameLanguage" :disabled="true" label="语言"></el-checkbox></div>
                    </div>
                </div>
            </div>

            <!-- 补充条件 -->
            <div class="create-item"  v-if="params.collectChannel === 'taptap'">
                <topTitle title="补充条件"/>
                <div class="check-box">
                    <div class="check-items">
                        <div><el-checkbox v-model="params.complementaryCondition.bookGame" label="忽略预约游戏"></el-checkbox></div>
                        <div><el-checkbox v-model="params.complementaryCondition.singleBandGame" label="忽略独代游戏"></el-checkbox></div>
                        <div><el-checkbox v-model="params.complementaryCondition.gameVersion" label="忽略存在游戏版本"></el-checkbox></div>
                        <div><el-checkbox v-model="params.complementaryCondition.feeGame" label="忽略收费游戏"></el-checkbox></div>
                    </div>
                    <div class="check-items">
                        <div><el-checkbox v-model="params.complementaryCondition.gameApk" label="采集应用宝apk"></el-checkbox></div>
                        <div><el-checkbox v-model="params.complementaryCondition.gameIntroduce" label="采集应用宝介绍"></el-checkbox></div>
                        <div><el-checkbox v-model="params.complementaryCondition.gameScore" label="采集应用宝评分"></el-checkbox></div>
                    </div>
                    <div class="check-items">
                        <div><el-checkbox v-model="params.complementaryCondition.gameCategory" label="采集应用宝分类"></el-checkbox></div>
                        <div><el-checkbox v-model="params.complementaryCondition.homePageVideo" label="同时采集应用宝首页视频"></el-checkbox></div>
                        <div><el-checkbox v-model="params.complementaryCondition.homePageBanner" label="同时采集应用宝首页banner"></el-checkbox></div>
                    </div>
                </div>
            </div>

            <div class="create-item"  v-else>
                <topTitle title="补充条件"/>
                <div class="check-box">
                    <div class="check-items">
                        <div><el-checkbox v-model="params.complementaryCondition.bookGame" label="忽略预约游戏"></el-checkbox></div>
                        <div><el-checkbox v-model="params.complementaryCondition.feeGame" label="忽略收费游戏"></el-checkbox></div>
                    </div>
                    <div class="check-items">
                        <div><el-checkbox v-model="params.complementaryCondition.singleBandGame" label="忽略独代游戏"></el-checkbox></div>
                    </div>
                    <div class="check-items">
                        <div><el-checkbox v-model="params.complementaryCondition.gameVersion" label="忽略存在游戏版本"></el-checkbox></div>
                    </div>
                </div>
            </div>

            <div class="create-item">
                <topTitle title="导入条件"/>
                <div class="check-box">
                    <div class="check-items">
                        <div><el-checkbox v-model="params.importCondition.manualScreening" @change="manualScreeningChange" label="手动筛选后导入"></el-checkbox></div>
                    </div>
                    <div class="check-items">
                        <div><el-checkbox v-model="params.importCondition.autoaticImport" @change="autoaticImportChange" label="搜索完成自动导入"></el-checkbox></div>
                    </div>
                </div>
            </div>

            <div class="btn-box">
                <el-button @click="submit" type="primary" style="width:500px;" size="small">开始采集</el-button>
            </div>
        </div>

        <div class="btn-box" v-if="!tableData.gameCollectResultVoList.length && showCheckData">
            <el-button type="primary" style="width:500px;" size="small" @click="resetParams">重新选取采集条件</el-button>
        </div>
    </div>
</template>

<script>
import checkData from './checkData'
export default {
    data () {
        return {
            loading: false,
            radio: 1,
            params: {
                collectChannel: 'taptap', // 采集渠道
                tapTapCollectWay: { // taptap采集方式
                    fromId: '', // 开始id
                    toId: '', // 结束ID
                    keyWord: '', // 关键字
                    limit: 10,
                    gameId: '',
                    packageName: ''
                },
                applicationTreasureColleectionWay: { // 应用宝采集方式
                    packageName: '', // 包名
                    keyWord: '', // 关键字
                    limit: 10
                },
                contentCollect: { // 采集内容
                    verticalScreen: false, // 竖屏截图
                    gameTitle: true, // 游戏副标题
                    gameFirm: true, // 游戏厂商
                    gameHomeVideo: true, // 游戏首页视频
                    gameIntroduce: true, // 游戏简介
                    gameCharges: true, // 游戏资费
                    twoOfficialVideo: true, // 二级官方视频
                    gameCategory: true, // 游戏类型
                    applyRating: true, // 应用分级
                    twoUserVideo: true, // 二级用户视频
                    label: true, // 游戏tag
                    updateTime: true, // 更新时间
                    apk: true, // 游戏apk
                    gameLength: true, // 游戏大小
                    gameScore: true, // 游戏评分
                    bannerImage: true, // banner样式图片
                    gameLanguage: true, // 语言
                    systemRequire: true // 系统要求
                },
                complementaryCondition: { // 补充条件
                    bookGame: false, // 预约游戏
                    gameApk: true, // 采集应用宝apk
                    gameCategory: true, // 采集应用宝分类
                    singleBandGame: false, // 独代游戏
                    gameIntroduce: true, // 采集应用宝介绍
                    homePageVideo: true, // 采集应用宝首页视频
                    gameVersion: false, // 存在游戏版本
                    gameScore: true, // 采集应用宝评分
                    homePageBanner: true, // 采集应用宝首页banner
                    feeGame: false // 忽略收费游戏
                },
                importCondition: { // 导入条件
                    manualScreening: true, // 是否手动导入
                    autoaticImport: false // 是否搜索完成自动导入
                }
            },
            showCheckData: false,
            tableData: {
                gameCollectResultVoList: []
            }
        }
    },

    methods: {
        channelChange (val) {
            this.radio = 1
        },

        manualScreeningChange (val) {
            this.params.importCondition.autoaticImport = !val
        },

        autoaticImportChange (val) {
            this.params.importCondition.manualScreening = !val
        },

        submintInit () {
            // 如果是应用宝
            if (this.params.collectChannel === '应用宝') {
                // 如果是包名
                if (this.radio === 1) {
                    if (!this.params.applicationTreasureColleectionWay.packageName) {
                        this.$message({
                            type: 'error',
                            message: '请输入包名！'
                        })
                        return true
                    }
                    this.params.applicationTreasureColleectionWay.keyWord = ''
                } else {
                    if (!this.params.applicationTreasureColleectionWay.keyWord) {
                        this.$message({
                            type: 'error',
                            message: '请输入关键字！'
                        })
                        return true
                    }
                    this.params.applicationTreasureColleectionWay.packageName = ''
                }
                delete this.params.tapTapCollectWay
            } else {
                // 如果是ID
                if (this.radio === 1) {
                    if (!this.params.tapTapCollectWay.fromId) {
                        this.$message({
                            type: 'error',
                            message: '请输入起始ID！'
                        })
                        return true
                    }
                    if (!this.params.tapTapCollectWay.toId) {
                        this.$message({
                            type: 'error',
                            message: '请输入终止ID！'
                        })
                        return true
                    }
                    let start = Number(this.params.tapTapCollectWay.fromId)
                    let end = Number(this.params.tapTapCollectWay.toId)
                    if (start > end) {
                        this.$message({
                            type: 'error',
                            message: '起始ID必须小于终止ID！'
                        })
                        return true
                    }
                    this.params.tapTapCollectWay.keyWord = ''
                    this.params.tapTapCollectWay.gameId = ''
                    this.params.tapTapCollectWay.packageName = ''
                } else if (this.radio === 2) {
                    if (!this.params.tapTapCollectWay.keyWord) {
                        this.$message({
                            type: 'error',
                            message: '请输入关键字！'
                        })
                        return true
                    }
                    this.params.tapTapCollectWay.fromId = ''
                    this.params.tapTapCollectWay.toId = ''
                    this.params.tapTapCollectWay.gameId = ''
                    this.params.tapTapCollectWay.packageName = ''
                } else {
                    if (!this.params.tapTapCollectWay.gameId) {
                        this.$message({
                            type: 'error',
                            message: '请输入gameId！'
                        })
                        return true
                    }
                    if (!this.params.tapTapCollectWay.packageName) {
                        this.$message({
                            type: 'error',
                            message: '请输入包名！'
                        })
                        return true
                    }
                    this.params.tapTapCollectWay.fromId = ''
                    this.params.tapTapCollectWay.toId = ''
                    this.params.tapTapCollectWay.keyWord = ''
                }
                delete this.params.applicationTreasureColleectionWay
            }
        },

        async submit () {
            if (this.submintInit()) return
            this.loading = true
            let res
            if (this.params.collectChannel === 'taptap') {
                res = await this.$http.post('/spider/gameCollectFirst', this.params)
            } else {
                res = await this.$http.post('/spider/applicationTreasureFirstStep', this.params)
            }
            if (res.code === '0') {
                // 如果是搜索完成后并导入
                if (this.params.importCondition.autoaticImport) {
                    this.$notify({
                        title: '数据导入成功',
                        message: '温馨提示，后台已为您自动导入。（自动导入需要一定时间，请耐心等待）',
                        type: 'success'
                    })
                    this.$router.go(-1)
                } else {
                    res.data.gameCollectResultVoList = res.data.gameCollectResultVoList || []
                    this.tableData = res.data
                    this.showCheckData = true
                }
                this.loading = false
                // if (res.data.gameover === 2) {
                // } else {
                //     this.timerId = setTimeout(() => {
                //         this.submit()
                //     }, 1000)
                // }
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
                this.resetParams()
                this.loading = false
            }
        },

        resetParams () {
            this.params.tapTapCollectWay = { // taptap采集方式
                fromId: '', // 开始id
                toId: '', // 结束ID
                keyWord: '', // 关键字
                limit: 10
            }
            this.params.applicationTreasureColleectionWay = { // 应用宝采集方式
                packageName: '', // 包名
                keyWord: '', // 关键字
                limit: 10
            }
            this.showCheckData = false
        }
    },

    components: {
        checkData
    }
}
</script>

<style lang="scss" scoped>
    .create-data {
        font-size: 14px;
        .title {
            margin-top: 10px;
            text-align: center;
        }

        .create-item {
            margin-top: 10px;
            .params-input-box {
                display: flex;
                align-items: center;
                min-height: 40px;
                margin-left: 20px;
                .radio-items {
                    width: 100px;
                }
                .params-input {
                    font-size: 14px;
                    .params-center {
                        margin: 0 10px;
                    }
                }
            }
            .check-box {
                display: flex;
                margin-left: 20px;
                .check-items {
                    width: 200px;
                    > div {
                        margin-top: 10px;
                    }
                    /deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label {
                        color: #409EFF;
                    }
                }
            }
        }

    }
    .btn-box {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
</style>
